<template>
	<view class="classification">
		<view class="v-tabs">
			<v-tabs v-model="current" lineHeight="6rpx" activeColor="#111111" lineColor="#DB1B22" :tabs="tabs" field="name" @change="changeTab"></v-tabs>
		</view>
		<view class="classification_item">
			<image mode="widthFix" style="width: 100%;" :src="item.cover[0].image||'/pagesB/static/微信图片_20201124091755.png'" ></image>
			<view class="item">
				<view class="grid-item product_grid-item" v-for="i in item.goods" :key="i"  @click="Details(i.goods_id)">
					<image class="img" :src="i.cover||'/pagesB/static/微信图片_20201124091755.png'" mode=""></image>
					<view class="text">
						<view class="title">{{ i.name }}</view>
						<view class="price">￥{{ i.price }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	  data() {
		return {
		  current: 3,
		  page:1,
		  item:[],
		  category_id:'',
		  model:'',
		  tabs: []
		}
	  },
	  methods:{
		  changeTab(index) {
			this.category_id=this.tabs[index].category_id
			this.$request('/app/mall/getCategoryGoods','post',{
				access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
				page:this.page,
				t:"3",
				category_id:this.category_id
			}).then(res=>{
				this.item=res.content
			})
		  },
		  Details(e) {
		  	// uni.setStorage({
		  	// 	key: 'goods_id',
		  	// 	data: JSON.stringify(e),
		  	// 	success: function() {}
		  	// });
		  	uni.navigateTo({
		  		url:'/pagesA/CommodityDetails/CommodityDetails?goods_id='+e
		  	})
		  }
	  },
	  created() {
		  this.category_id = uni.getStorageSync('category_id').replace(/^\"|\"$/g,'')
		let access_token = uni.getStorageSync('access_token').replace(/^\"|\"$/g,'')
		uni.getSystemInfo({
			success:(res)=> {
				this.model= res.model
			}
		})
		this.$request('/app/mall/getCategoryGoods','post',{
	  		access_token:access_token,
	  		page:this.page,
			t:"3",
			category_id:this.category_id
	  	}).then(res=>{
			this.item=res.content
	  	})
		this.$request('/app/mall/getGoodsHomeData','post',{
			access_token:access_token,
			page:this.page,
			t:this.model,
			category_id:this.category_id
		}).then(res=>{
			this.tabs=res.content.categorys
			this.tabs.forEach((v,i)=>{
				if(this.category_id==v.category_id){
					this.current=i
				}
			})
		})
	  },
	  onReachBottom() {
	  	this.page++
	  	this.$request('/app/mall/getCategoryGoods','post',{
	  		access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
	  		page:this.page,
			t:"3",
			category_id:this.category_id
	  	}).then(res=>{
			if(res.content.goods==''){
				uni.showToast({
					title:'没有商品啦！',
					icon:'none'
				})
			}else{
				res.content.goods.forEach(v=>{
					this.item.goods.push(v)
				})
			}
	  	})
	  },
	}
</script>

<style lang="less">
	.classification{
		background: #F3F4F5;
		padding-top: 78rpx;
		.v-tabs{
			position: fixed;
			top: 0px;
			border-top: 1px solid #F3F4F5;
		}
		.classification_item{
			.item{
				    display: flex;
				    flex-wrap: wrap;
				    justify-content: flex-start;
					    padding-top: 20rpx;
			}
			.grid-item {
				    width: 46%;
				    margin-bottom: 20rpx;
				    margin-left: 20rpx;
				padding-bottom: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.img {
					width: 100%;
					height: 340rpx;
					background-color: pink;
					border-radius: 10rpx 10rpx 0 0;
				}
				.text {
					display: flex;
					flex-direction: column;
					align-items: center;
					.introduce {
						margin: 10rpx 0;
						padding: 8rpx;
						background: #fff3f3;
						border-radius: 3px;
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #db1b22;
					}
					.title {
						font-size: 26rpx;
						font-family: PingFangSC-Light, PingFang SC;
						font-weight: 300;
						color: #333333;
						font-size: 26rpx;
						height: 68rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						padding: 20rpx 20rpx 0;
					}
					.price {
						    padding: 0 20rpx;
						    box-sizing: border-box;
						margin: 10rpx 0;
						width: 100%;
						line-height: 44rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #db1b22;
					}
					.evaluate {
						border-top: 1px solid #acacac;
						padding: 10rpx 0;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 74rpx;
						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 3px;
						}
						.content {
							flex: 1;
							font-size: 18rpx;
							font-family: PingFangSC-Light, PingFang SC;
							font-weight: 300;
							color: #777777;
							line-height: 26rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
</style>
